<template>
	<view class="home">
		<!-- 通知类的广告部分 -->
		<view class="ad_notice">
			<u-notice-bar bgColor="#fff" color="#00c2ff" mode="vertical" :list="list_notice" type="info" @click="notice"></u-notice-bar>
		</view>

		<!-- 广告部分 -->
		<view class="ad">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click" @open="open"
			 :options="options">
				<view class="item u-border-bottom">
					<image mode="aspectFill" :src="item.images" />
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title-wrap">
						<text class="title u-line-2">{{ item.title }}</text>
					</view>
				</view>
			</u-swipe-action>
		</view>

		<!-- 间隔 -->
		<u-gap height="20" bg-color="#f2f2f2" margin-top="10" margin-bottom="10"></u-gap>

		<!-- content主要内容部分 -->
		<view class="content">
			<view>
				<view class="content_item" v-for="(item,index) in PrintInfo" :key="item.id" v-if="item.select_paoshou == '' && item.whether_finished == 0">
					<u-section :title="item.get_Address" sub-title="查看更多" font-size="32" @click="nav(item.id)" subColor="#808080"></u-section>
				</view>
			</view>
		</view>
		
		<!-- bottom底部 -->
		<view class="bottom">
			------到底了哦------
		</view>
		<fireworks v-if="isReady" />
	</view>
</template>

<script>
	import fireworks from '@/pagesA/sanshui-fireworks/index.vue'
	export default {
		components:{
			fireworks
		},
		data() {
			return {
				isReady:false,
				list: [{
						id: 1,
						title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
						images: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180606%2F3ded4a5c10f4400b9a59a8362f6c76e7.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626957417&t=6cdd2498d983fdac2c650845cc04c03b',
						show: false
					},
					{
						id: 2,
						title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
						images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595223646295&di=d33b50455955ecf2b432c3da4fe55dc3&imgtype=0&src=http%3A%2F%2Ffile01.16sucai.com%2Fd%2Ffile%2F2013%2F0930%2F31397c0d0189d2cea2f471d94cfd476e.jpg',
						show: false
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1733875357,104676724&fm=26&gp=0.jpg',
						show: false
					}
				],
				options: [{
						text: '收藏',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				list_notice: [
					'长大跑腿服务一条龙，希望你满意！！',
					'长大跑腿服务一条龙，希望你满意！！',
					'长大跑腿服务一条龙，希望你满意！！',
					'长大跑腿服务一条龙，希望你满意！！'
				],
				PrintInfo:[]
			};
		},
		onReady() {
			this.isReady = true
		},
		methods: {
			click(index, index1) {
				if (index1 == 1) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					if (this.list[index].show === true) {
						this.list[index].show = false;
					}
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				//map()方法用于返回一个新数组，map()不会对空数组进行检测且map()不会改变原始数组
				//其中(val,idx)分别为数组中的元素对象和索引值
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			notice(){
				console.log('用户点击了通知广告')
			},
			nav(index){
				// console.log('这是导航')
				getApp().globalData.Print = this.PrintInfo[index-1]
				
				uni.navigateTo({
					url:'../../pagesE/Print_Details/Print_Details'
				})
			},
			async GetPrintMessage(){
				const res = await this.$myRequest({
					url:'GetPrintMessage'
				})
				this.PrintInfo = res.data.message;
			}
		},
		onLoad() {
			this.GetPrintMessage();			
		},
		onShow() {
			uni.$on('Select_PrintTask',()=>{
				this.GetPrintMessage();
			})
		}
	};
</script>

<style lang="scss">
	.home {
		width: 750rpx;

		.ad_notice{
			background-color: #f2f2f2 !important;
		}
		
		.ad {
			
			.item {
				display: flex;
				padding: 20rpx;
				background-color: #fff;
			}

			image {
				width: 120rpx;
				flex: 0 0 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 6rpx;
			}

			.title {
				text-align: left;
				font-size: 30rpx;
				line-height: 48rpx;
				color: #333;
				margin-top: 20rpx;
			}
		}

		.content {
			width: 100%;
			
			.content_item{
				font-size: 28rpx;
				width: 750rpx;
				box-sizing: border-box;
				padding: 34rpx 20rpx;
				border-bottom: 1px solid #E4E7ED;
			}
		}
		
		.bottom{
			width: 750rpx;
			box-sizing: border-box;
			padding: 7px;
			text-align: center;
		}
	}
</style>
